<template>
  <nav>
    <ul>
      <li>
        <router-link to="/" exact>Blog</router-link>
      </li>
      <li>
        <router-link to="/add">Add a new blog</router-link>
      </li>
      <li>
        <router-link to="/message">Message</router-link>
      </li>
      <li>
        <router-link to="/todos">Todos</router-link>
      </li>
      <li>
        <router-link to="/products">Products</router-link>
      </li>
      <li>
        <router-link to="/users/10">User 10</router-link>
      </li>
      <li>
        <router-link to="/users/12">User 12</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {};
</script>

<style scoped>
  ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #fff;
    text-decoration: none;
    padding: 12px;
    border-radius: 5px;
  }

  nav {
    background: crimson;
    padding: 30px 0;
    margin-bottom: 40px;
  }

  .router-link-active {
    background: rgba(255, 255, 255, 0.8);
    color: #444;
  }

</style>
